<template>
    <div id="app">
        <el-container>
            <el-aside :width="isCollapsed ? '60px' : '200px'" class="sidebar">
                <el-menu
                    :default-active="activeMenu"
                    class="el-menu-vertical-demo"
                    :collapse="isCollapsed"
                    :collapse-transition="true"
                    background-color="#304156"
                    text-color="#bfcbd9"
                    active-text-color="#409EFF"
                >
                    <el-menu-item
                        v-for="item in menuItems"
                        :key="item.index"
                        :index="item.index"
                        :disabled="item.disabled"
                        @click="goToPage(item.path)"
                    >
                        <i :class="item.icon"></i>
                        <span slot="title">{{ item.title }}</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header class="header">
                    <el-button
                        :icon="isCollapsed ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
                        circle
                        @click="toggleSidebar"
                        class="collapse-btn"
                    ></el-button>
                    <span class="header-title">管理系统</span>
                    <div class="header-right">
                        <el-dropdown>
              <span class="el-dropdown-link">
                用户名 <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>个人中心</el-dropdown-item>
                                <el-dropdown-item>退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </el-header>
                <el-main class="main-content">
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
    name: 'App',
    data() {
        return {
            isCollapsed: false, // 控制侧边栏是否折叠
            activeMenu: '1', // 当前激活的菜单项
            // 菜单项配置，包含索引、标题、路径、图标和禁用状态
            menuItems: [
                { index: '1', title: '首页', path: '/', icon: 'el-icon-attract', disabled: false },
                { index: '2', title: '用户管理', path: '/user', icon: 'el-icon-s-custom', disabled: false },
                { index: '3', title: '角色管理', path: '/role', icon: 'el-icon-document', disabled: false },
                { index: '4', title: 'API管理', path: '/api', icon: 'el-icon-setting', disabled: false },
            ],
        };
    },
    methods: {
        // 导航到指定路径
        goToPage(path) {
            this.$router.push(path).catch(err => {
                // 忽略重复导航的错误
                if (err.name !== 'NavigationDuplicated') {
                    console.error('导航失败:', err);
                }
            });
        },
        // 切换侧边栏折叠状态
        toggleSidebar() {
            this.isCollapsed = !this.isCollapsed;
        },
    },
    watch: {
        // 监听路由变化，动态更新激活的菜单项
        $route(to) {
            const matchedItem = this.menuItems.find(item => item.path === to.path);
            if (matchedItem) {
                this.activeMenu = matchedItem.index;
            }
        },
    },
    created() {
        // 初始化时根据当前路由设置激活菜单
        const matchedItem = this.menuItems.find(item => item.path === this.$route.path);
        if (matchedItem) {
            this.activeMenu = matchedItem.index;
        }
    },
};
</script>

<style scoped>
.el-container {
    height: 100vh;
    background-color: #f0f2f5;
}

.header {
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    display: flex;
    align-items: center;
    padding: 0 20px;
    z-index: 1000; /* 确保头部在最上层 */
}

.collapse-btn {
    margin-right: 20px;
    background-color: #409EFF;
    color: #fff;
    border: none;
}

.collapse-btn:hover {
    background-color: #66b1ff;
}

.header-title {
    font-size: 18px;
    font-weight: bold;
    color: #303133;
}

.header-right {
    margin-left: auto;
}

.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
    font-size: 14px;
}

.sidebar {
    background-color: #304156;
    transition: width 0.3s;
    overflow-x: hidden;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}

.main-content {
    background-color: #fff;
    padding: 20px;
    margin: 20px;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.el-menu {
    border-right: none;
}

.el-menu-item {
    font-size: 14px;
}

.el-menu-item.is-active {
    background-color: #263445 !important;
}
</style>